<template>
  <el-dialog
    title="配置护理人员"
    :close-on-click-modal="false"
    width="65%"
    :visible.sync="visible"
  >
    <el-select v-model="customerId" @change="Changesing" placeholder="请选择人员">
      <el-option
        v-for="temp in customernullList"
        :key="temp.id"
        :label="temp.customername"
        :value="temp.id"
      >
      </el-option>
    </el-select>
    
    <el-button type="primary" @click="addclick">添加</el-button>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="序号"> </el-table-column>
      <el-table-column prop="customername" label="客户姓名"> </el-table-column>
      <el-table-column prop="customerage" label="年龄"> </el-table-column>
      <el-table-column prop="customersex" label="性别" :formatter="formatSex">
      </el-table-column>
      <el-table-column prop="roomno" label="房间号"> </el-table-column>

      <el-table-column
        align="center"
        label="操作">
        
          <template slot-scope="scope" >
          <el-button type="text" size="mini" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <br />
    <el-row>
      <el-button @click="visible = false">关闭</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      value: null,
      customername: "",
      nid: -1,
      customerId: "",
      num: 1,
      UserId: "",
      customernullList: [],
      tableData: [],
    };
  },
  created() {
    this.selectnullcustumer(this.nid);
  },
  methods: {

    deleteHandle(cid){
     this.$http({
        url: this.$http.adornUrl(
          `/healthmanage/healthmanage/updatecustomerByUserId`
        ),
        method: "post",
        params: this.$http.adornParams(
         {
           customerId: cid,
           userId: -1
         }

        ),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.customerId = '';
          this.init(this.UserId);
          this.selectnullcustumer(this.nid);
        }
      });

    },
    addclick() {
      this.$http({
        url: this.$http.adornUrl(
          `/healthmanage/healthmanage/updatecustomerByUserId`
        ),
        method: "post",
        params: this.$http.adornParams(
         {
           customerId: this.customerId,
           userId: this.UserId
         }

        ),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.customerId = '';
          this.init(this.UserId);
          this.selectnullcustumer(this.nid);
        }
      });
    },
    Changesing(value) {
      this.customerId = value;
    },
    selectnullcustumer(nid) {
      this.$http({
        url: this.$http.adornUrl(
          `/healthmanage/healthmanage/customerByUserId/${nid}`
        ),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data);
          this.customernullList = data.page.records;
        }
      });
    },
    formatSex(row, column, cellValue) {
      return cellValue === 0 ? "男" : "女";
    },
    init(id) {
      this.levelId = "";
      this.tableData = [];
      this.visible = true;
      console.log("------------------userid" + id);
      this.UserId = id;
      // this.selectnullcustumer(this.nid)
      this.$http({
        url: this.$http.adornUrl(
          `/healthmanage/healthmanage/customerByUserId/${id}`
        ),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data);
          this.tableData = data.page.records;
        }
      });
    },
  },
};
</script>
